<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=0, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            width: 734px;
            height: 548px;
            background-color: rgba(0, 0, 0, 0.2);
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <ul>
        
    </ul>

    <script>
        let ul = document.querySelector("ul")
        let xhr = new XMLHttpRequest()
        xhr.open("GET","http://studentback.dfbuff.top/getMethod?type=%E5%9B%BE%E7%89%87")
        xhr.send()
        xhr.addEventListener("readystatechange",function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    JSON.parse(xhr.response).result.forEach(function(item){
                        ul.innerHTML += `<li><img src="" alt="" data-src="${item.content}" class="lazy" width="734px" height="548px"></li>`
                    })
                    loading(".lazy")
                    function loading($tag){
                        let img = document.querySelectorAll($tag)
                        if(!img.length)return
                        img.forEach(function(el){
                            if(document.documentElement.clientHeight + document.documentElement.scrollTop >= el.offsetTop){
                                el.classList.remove('lazy')
                                el.src = el.dataset.src
                                console.log("到达",el);
                            }
                        })
                    }
                    document.addEventListener("scroll",function(){
                        loading(".lazy")
                    })
                }
                
            }
        })
    </script>
</body>
</html>